<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of Five-Rod Pendulum</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="480" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters based on geometric constraints (5 identical rods)
    // Constraint: 2*sin(φ₁) + 2*sin(φ₂) = 1
    // A visually plausible solution satisfying this is chosen.
    const cx = 250;
    const y0 = 60;
    const L = 150;
    const phi1_deg = 8.0;    // Angle in degrees
    const phi2_deg = 21.15;  // Angle in degrees
    const rad1 = phi1_deg * Math.PI / 180;
    const rad2 = phi2_deg * Math.PI / 180;

    // --- Calculate Vertex Coordinates ---
    const Ax = cx;
    const Ay = y0;

    const Bx = cx - L * Math.sin(rad1);
    const By = y0 + L * Math.cos(rad1);

    const Cx = Bx - L * Math.sin(rad2);
    const Cy = By + L * Math.cos(rad2);
    
    // Use symmetry for the right side
    const Ex = cx + (cx - Bx);
    const Ey = By;
    const Dx = cx + (cx - Cx);
    const Dy = Cy;

    // --- Drawing Functions ---
    function drawHinge(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 4.5, 0, 2 * Math.PI);
        ctx.fill();
    }

    // --- Draw Diagram Elements ---

    // 1. Draw Support
    ctx.beginPath();
    ctx.moveTo(cx - 100, y0 - 20);
    ctx.lineTo(cx + 100, y0 - 20);
    ctx.stroke();
    ctx.lineWidth = 1.5;
    for (let i = -95; i < 100; i += 15) {
        ctx.beginPath();
        ctx.moveTo(cx + i, y0 - 20);
        ctx.lineTo(cx + i - 10, y0 - 30);
        ctx.stroke();
    }
    ctx.lineWidth = 2;

    // 2. Draw Rods
    ctx.beginPath();
    ctx.moveTo(Ax, Ay);
    ctx.lineTo(Bx, By);
    ctx.lineTo(Cx, Cy);
    ctx.lineTo(Dx, Dy);
    ctx.lineTo(Ex, Ey);
    ctx.closePath();
    ctx.stroke();

    // 3. Draw Hinges
    drawHinge(Ax, Ay);
    drawHinge(Bx, By);
    drawHinge(Cx, Cy);
    drawHinge(Dx, Dy);
    drawHinge(Ex, Ey);

    // 4. Draw Center Dashed Line
    ctx.save();
    ctx.setLineDash([4, 4]);
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(cx, Ay);
    ctx.lineTo(cx, Dy + 10);
    ctx.stroke();
    ctx.restore();

    // 5. Draw Angle φ₁
    const arcRadius1 = 30;
    ctx.beginPath();
    ctx.arc(Ax, Ay, arcRadius1, Math.PI / 2 - rad1, Math.PI / 2);
    ctx.stroke();
    // Angle label φ₁
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('φ', cx - 22, Ay + 30);
    ctx.font = '16px "Times New Roman"';
    ctx.fillText('1', cx - 14, Ay + 35);
    

    // 6. Draw Angle φ₂
    // Dashed vertical guide from B
    ctx.save();
    ctx.setLineDash([3, 3]);
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(Bx, By);
    ctx.lineTo(Bx, By + 40);
    ctx.stroke();
    ctx.restore();
    // Arc for φ₂
    const arcRadius2 = 30;
    ctx.beginPath();
    ctx.arc(Bx, By, arcRadius2, Math.PI / 2 - rad2, Math.PI / 2);
    ctx.stroke();
    // Angle label φ₂
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('φ', Bx - 22, By + 30);
    ctx.font = '16px "Times New Roman"';
    ctx.fillText('2', Bx - 14, By + 35);


    // 7. Draw Rod Labels
    ctx.font = '24px "Times New Roman"';
    // Label 1
    ctx.fillText('1', (Ax + Bx) / 2 - 25, (Ay + By) / 2);
    // Label 2
    ctx.fillText('2', (Bx + Cx) / 2 - 30, (By + Cy) / 2);
    // Label 3
    ctx.fillText('3', cx, Cy + 25);


    // 8. Draw Caption
    ctx.font = '22px "SimSun", "STSong"';
    ctx.fillText('力图 5.9.1', cx, Dy + 65);

</script>
</body>
</html>